<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微应用中心</title>
    <style>
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .loading {
            display: flex;
            justify-content: center;
            padding: 20px;
        }
        .loading-dot {
            width: 10px;
            height: 10px;
            margin: 0 5px;
            background-color: #07c160; /* 微信绿 */
            border-radius: 50%;
            animation: bounce 1.4s infinite ease-in-out;
        }
        .loading-dot:nth-child(1) {
            animation-delay: -0.32s;
        }
        .loading-dot:nth-child(2) {
            animation-delay: -0.16s;
        }
        @keyframes bounce {
            0%, 80%, 100% { transform: scale(0); }
            40% { transform: scale(1); }
        }
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background-color: #f8f9fa;
            color: #333;
        }
        h1 {
            text-align: center;
            padding: 20px 0;
            font-size: 24px;
            color: #333;
        }
        .app-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
            gap: 15px;
            padding: 15px;
            max-width: 500px;
            margin: 0 auto;
        }
        .app-icon {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            padding: 15px 10px;
            border-radius: 12px;
            transition: all 0.2s;
            background-color: white;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
            text-decoration: none;
            color: inherit;
            height: 100%;
        }
        .app-icon:active {
            transform: scale(0.95);
            background-color: #f0f0f0;
        }
        .app-icon:hover {
            background-color: #e8f7ef; /* 微信绿的浅色版本 */
        }
        .app-icon > div {
            font-size: 32px;
            margin-bottom: 8px;
        }
        .app-icon > span {
            font-size: 14px;
            text-align: center;
            word-break: break-word;
        }
        .app-icon.active {
            background-color: #07c160; /* 微信绿 */
            color: white;
        }
        @media (max-width: 400px) {
            .app-container {
                grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
                gap: 10px;
                padding: 10px;
            }
            .app-icon > div {
                font-size: 28px;
            }
            .app-icon > span {
                font-size: 12px;
            }
        }
    </style>
</head>
<body>
    <h1 style="text-align: center; margin-top: 20px;">微应用中心</h1>
    <div class="app-container" id="appContainer">
        <div class="loading" id="loading">
            <div class="loading-dot"></div>
            <div class="loading-dot"></div>
            <div class="loading-dot"></div>
        </div>
    </div>

    <script>
        // 应用列表数据
        const apps = [
            { name: '计算器', path: 'calculator', icon: '📱' },
            { name: '相册', path: 'gallery', icon: '🖼️' },
            { name: '俄罗斯方块', path: 'tetris', icon: '🧩' }
        ];

        // 动态生成应用图标
        const appContainer = document.getElementById('appContainer');
        const loading = document.getElementById('loading');
        
        // 模拟加载延迟
        setTimeout(() => {
            loading.style.display = 'none';
            apps.forEach((app, index) => {
                const appElement = document.createElement('div');
                appElement.className = 'app-icon';
                appElement.style.animation = `fadeIn 0.3s ease-out ${index * 0.1}s forwards`;
                appElement.style.opacity = '0';
                appElement.innerHTML = `
                    <div>${app.icon}</div>
                    <span>${app.name}</span>
                `;
                appElement.addEventListener('click', () => {
                    // 添加触觉反馈（如果设备支持）
                    if ('vibrate' in navigator) {
                        navigator.vibrate(10);
                    }
                    // 添加激活效果
                    document.querySelectorAll('.app-icon').forEach(icon => {
                        icon.classList.remove('active');
                    });
                    appElement.classList.add('active');
                    // 延迟跳转以显示激活效果
                    setTimeout(() => {
                        window.location.href = `/apps/${app.path}`;
                    }, 150);
                });
                appContainer.appendChild(appElement);
            });
        }, 800);
    </script>
</body>
</html>